.root
  position fixed
  bottom 0
  background-color #404953
  height 103px
  width 100%
  z-index 6000
  display flex
  align-items center
  justify-content center


.root ul
  display flex
  color #fff
  font-size 14px
  align-items center
  width 885px
.point
  width 10px
  height 10px
  border-radius 50%
  background-color #fff
  margin-top 24px
  display inline-block


.root li
  display flex
  justify-content center
  min-width 56px
  text-align center

.root li > div
  display flex
  flex-direction column
  align-items center

.steps li
  position relative

.next
  position absolute
  background-color #404953
  border-radius 3px
  width 302px
  min-height  185px
  margin-bottom 82px
  bottom 100%
  left 0
  display block
  padding 18px 25px 70px 25px
  h2
    font-size 16px
    line-heihgt 1
    margin-bottom 8px
  > p
    font-size 12px
    text-align left
  > p:first-child
    min-height 90px

.circle
  border: 7px solid rgba(209, 213, 220,.1);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  position: absolute;
  bottom: 12px;
  > div
    width: 14px;
    height: 14px;
    border: 1px solid #D1D5DC;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -7px;
    margin-left: -7px;
    > div
      position: absolute;
      width: 6px;
      height: 6px;
      background: #D1D5DC;
      border-radius: 50%;
      left: 50%;
      top: 50%;
      margin-top: -3px;
      margin-left: -3px;

.circle-line
  width 1px
  background-color #D1D5DC
  height 108px
  position absolute
  left 47px
  top 100%
  margin-top -28px

.name
  font-size 12px
  cursor pointer
  padding 0 10px
  height 30px
  line-height 30px
  text-align center
  border-radius 3px
  position relative
  &:after
    content ''
    position absolute
    width 10px
    height 10px
    border-radius 50%
    background #9fa4a9
    top 100%
    left 50%
    margin-left -5px
    transform translateY(16px)
    transition .3s
  &.current 
    &:after
      background #fff
      box-shadow 0 0 3px  #fff, 0 0 6px #fff
  &.active
    &:after
      transform translateY(16px) scale(1.6)
      
.name.active
  color #fff
  background-color #000
  cursor initial
  &:before
    content ''
    position absolute
    width 20px
    top 100%
    left 50%
    margin-left -10px
    border-width 7px 10px
    border-style solid
    border-color #000 transparent transparent transparent   
  
  

.delete-demo
  cursor pointer

.delete-demo.active
  background-color: #3ba6ff;
  border none

.delete-demo
  margin-left 50px
  width 167px
  height 36px
  background-color transparent
  border 1px solid #FFFFFF
  outline none
  color #FFFFFF

.next-guide
  color: #fff;
  font-size: 12px;
  text-align: left;
  border: none;
  outline: none;
  background-color transparent
  height 40px
  margin 0
  padding 0

.next-guide-wrapper
  z-index: 2;
  background-color #139CFF
  position absolute
  padding: 5px 15px;
  max-width: 173px;
  width 173px
  height 51px
  &.right
    &::after
      border-color: transparent #139CFF transparent transparent;
      transition: border-color 0.2s;
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 26px 8px 26px 0;
      position: absolute;
      left: -8px;
      top: 0;
  &.left
    &::after
      border-color: transparent transparent transparent #139cff;
      transition: border-color 0.2s;
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 26px 0 26px 8px;
      position: absolute;
      right: -8px;
      top: 0;

.next-guide-wrapper + .next-guide-wrapper
  z-index: 1;
  background-color: rgba(61, 174, 255, 0.45098);
  height: 47px;
  &.left
    transform translate3d(5px,-2px,0px)
  &.right
    transform translate(-5px,2px)
  &.left::after
    border-left-color rgba(61, 174, 255,.45)
    border-width 23px 0 24px 8px
  &.right::after
    border-right-color rgba(61, 174, 255,.45)
    border-width 23px 8px 24px 0 

.next-guide-wrapper.small
  height 34px 
  .next-guide
    height 24px
    text-align center
    width 100%
  &.right
    &::after
      border-width: 17px 8px 17px 0;
  &.left
    &::after
      border-width: 17px 0 17px 8px;

.next-guide-wrapper.small + .next-guide-wrapper.small
  height 30px
  &.right
    transform translate3d(-4px,2px,0)
    &::after
      border-width: 15px 8px 15px 0;
  &.left
    transform translate3d(4px,2px, 0)
    &::after
      border-width: 15px 0 15px 8px;
      
.step-layout
  height 60px
  position relative
  z-index 1
.step-progess-bg,.step-progess
  bottom 7px
  background #000
  height 4px
  z-index -2
  position absolute
.step-progess
  background #139DD9
  transition .5s
  

  
